<template>
    <div class="contarner-page">
        <div class="page_content ">
            <div class="home_content">
                <!-- <page-header index="'0'" @fetchMediaList="fetchMediaList" @goAdmin="goAdmin"
                    @showDialogVisible="showDialogVisible" @logOut="logOut" ref="languageRef"></page-header> -->
                <!-- 搜索 -->
                <div class="container">
                    <div class=" " :class="Reverse ? 'Reverse' : ''">
                        <!-- 规格 -->
                        <div class="search_box">
                            <div class="item flex_">
                                <div class="flex_" style="margin-right: 10px;">
                                    <div class="tag_title">
                                        Category
                                    </div>
                                    <img src="@/assets/arrow.webp" class="img" alt="">
                                </div>
                                <div class="content">
                                    <!-- 全部按钮（可选） -->
                                    <div class="tag_all shou" :class="selectedTypeIds.length === 0 ? 'change' : ''"
                                        @click="changeTypeAll">
                                        All
                                    </div>
                                    <div class="tag shou" :class="selectedTypeIds.includes(item.id) ? 'change' : ''"
                                        @click="toggleType(item)" :key="item.id" v-for="(item, k) in typeList">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 排序 -->
                        <!-- <div class="item flex_">
                        <div class="tag_title">排序</div>
                        <div class="tag_all shou" :class="sort == null ? 'change' : ''" @click="changeSortAll">默认</div>
                        <div class="tag shou" :class="sort == k ? 'change' : ''" @click="changeSort(item, k)" :key="k"
                            v-for="(item, k) in sortList">
                            {{ item }}
                        </div>
                    </div> -->
                    </div>
                    <el-tag closable class="el-tag " v-if="nickname" @close="closeTag">
                        by:{{ nickname }}
                    </el-tag>
                    <div class="success-box">
                        <div class="success-list">
                            <div class="media-card" :key="k" v-for="(item, k) in list" @click="showMedia(item)">
                                <div class="card-inner">
                                    <div class="media-poster">
                                        <img :src="item.cover_image" class="poster-img" alt="Preview" loading="lazy" />
                                        <div class="poster-overlay">
                                            <div class="play-icon">
                                                <i class="icon-play"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media-info">
                                        <div class="media-title" :title="item.title">{{ item.title }}</div>
                                        <div class="media-meta">
                                            <span class="episode-count" v-if="item.total">{{ item.total }}集</span>
                                            <span class="category-tags" v-if="item.category && item.category.length">
                                                <span class="category-tag" v-for="cat in item.category.slice(0, 2)"
                                                    :key="cat.id">
                                                    {{ cat.name.split('/')[0] }}
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modern-pagination" v-if="total > 0">
                        <div class="pagination-container">
                            <!-- 上一页 -->
                            <button class="pagination-btn prev-btn" :class="{ disabled: pageNo === 1 }"
                                @click="pageNo > 1 ? getPageNo(pageNo - 1) : null" :disabled="pageNo === 1">
                                <i class="arrow-left"></i>
                                <span class="btn-text">上一页</span>
                            </button>

                            <!-- 页码列表 -->
                            <div class="page-numbers">
                                <!-- 第一页 -->
                                <button v-if="startNumAndEndNum.start > 1" class="page-btn"
                                    :class="{ active: pageNo === 1 }" @click="getPageNo(1)">
                                    1
                                </button>

                                <!-- 左侧省略号 -->
                                <span v-if="startNumAndEndNum.start > 2" class="dots">···</span>

                                <!-- 中间页码 -->
                                <button v-for="(page, index) in pagesArr" :key="index" class="page-btn"
                                    :class="{ active: pageNo === page }" @click="getPageNo(page)">
                                    {{ page }}
                                </button>

                                <!-- 右侧省略号 -->
                                <span v-if="startNumAndEndNum.end < totalPage - 1" class="dots">···</span>

                                <!-- 最后一页 -->
                                <button v-if="startNumAndEndNum.end < totalPage" class="page-btn"
                                    :class="{ active: pageNo === totalPage }" @click="getPageNo(totalPage)">
                                    {{ totalPage }}
                                </button>
                            </div>

                            <!-- 下一页 -->
                            <button class="pagination-btn next-btn" :class="{ disabled: pageNo === totalPage }"
                                @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null"
                                :disabled="pageNo === totalPage">
                                <span class="btn-text">下一页</span>
                                <i class="arrow-right"></i>
                            </button>

                            <!-- 页码信息 -->
                            <div class="page-info">
                                共 {{ total }} 条，第 {{ pageNo }} / {{ totalPage }} 页
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <el-dialog custom-class="modern-media-dialog" :visible.sync="dialogVisible1" :width="dialogWidth"
                :class="Reverse ? 'Reverse' : ''" :show-close="true" :close-on-click-modal="true" center>

                <!-- 关闭按钮 -->
                <div slot="title" class="dialog-header">
                    <span class="dialog-title">剧集详情</span>
                </div>

                <div class="dialog-content">
                    <!-- 海报区域 -->
                    <div class="poster-section">
                        <div class="poster-container">
                            <img :src="form.cover_image" class="poster-image" alt="Preview" />
                            <div class="poster-badge" v-if="form.total">{{ form.total }}集</div>
                        </div>
                    </div>

                    <!-- 信息区域 -->
                    <div class="info-section">
                        <!-- 标题 -->
                        <h2 class="media-title">{{ form.title }}</h2>

                        <!-- 分类标签 -->
                        <div class="category-section" v-if="form.category && form.category.length">
                            <div class="category-list">
                                <span v-for="cat in form.category" :key="cat.id" class="category-chip">
                                    {{ cat.name.split('/')[0] }}
                                </span>
                            </div>
                        </div>

                        <!-- 剧情简介 -->
                        <div class="description-section" v-if="form.desc">
                            <h3 class="section-title">剧情简介</h3>
                            <div class="description-content" :class="{ expanded: descExpanded }">
                                <p class="description-text">{{ form.desc }}</p>
                                <div v-if="form.desc && form.desc.length > 120" class="expand-btn"
                                    @click="descExpanded = !descExpanded">
                                    {{ descExpanded ? '收起' : '展开' }}
                                    <i :class="descExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 其他信息 -->
                        <div class="meta-info" v-if="form.voice_lang || form.lang">
                            <div class="meta-item" v-if="form.voice_lang">
                                <span class="meta-label">配音:</span>
                                <span
                                    class="meta-value">{{ form.voice_lang === 'zh_hans' ? '中文' : form.voice_lang }}</span>
                            </div>
                            <div class="meta-item" v-if="form.lang">
                                <span class="meta-label">字幕:</span>
                                <span class="meta-value">{{ form.lang === 'zh_hant' ? '繁体中文' : form.lang }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="episode-selector" v-if="form.total > 1">
                    <h3 class="section-title">选集观看/下载</h3>
                    <div class="episode-list">
                        <span v-for="i in form.total" :key="i"
                            :class="['episode-chip', { selected: selectedEpisode === i }]" @click="selectEpisode(i)">
                            第{{ i }}集
                        </span>
                    </div>
                </div>

                <!-- 操作按钮区域 -->
                <div class="action-section">
                    <div class="action-buttons">
                        <button class="play-button" @click="goPlay">
                            <i class="play-icon"></i>
                            <span>立即播放</span>
                        </button>
                        <button class="download-button" @click="goDownload">
                            <i class="download-icon"></i>
                            <span>下载观看</span>
                        </button>
                    </div>
                </div>
            </el-dialog>
            <el-dialog :visible.sync="showVideoDialog" width="70vw" custom-class="modern-video-dialog">
                <video :src="currentPlayUrl" controls style="width:100%;height:auto"></video>
            </el-dialog>
        </div>

    </div>

</template>
<script>
import axios from 'axios'
import {
    mapState,
    mapGetters,
    mapMutations
} from "vuex";
// import pageHeader from "@/components/page-header.vue";
import { generateSign } from "@/api/iptv";

export default {
    name: 'Home',
    components: {
        // pageHeader
    },

    data() {
        return {
            showVideoDialog: false,
            currentPlayUrl: '',
            type: null,
            city: null,
            sort: 0,
            typeId: '',
            cityId: '',
            typeList: [
                {
                    "id": 1,
                    "name": "男频/Male Category"
                },
                {
                    "id": 2,
                    "name": "女频/Female Category"
                },
                {
                    "id": 3,
                    "name": "都市/Urban"
                },
                {
                    "id": 4,
                    "name": "悬疑/Suspense"
                },
                {
                    "id": 5,
                    "name": "现言/Contemporary Romance"
                },
                {
                    "id": 6,
                    "name": "古言/Historical Romance"
                },
                {
                    "id": 7,
                    "name": "军事/Military"
                },
                {
                    "id": 8,
                    "name": "玄幻/Fantasy"
                },
                {
                    "id": 9,
                    "name": "热血/Passionate"
                },
                {
                    "id": 10,
                    "name": "历史/History"
                },
                {
                    "id": 11,
                    "name": "喜剧/Comedy"
                },
                {
                    "id": 12,
                    "name": "动作/Action"
                },
                {
                    "id": 13,
                    "name": "二次元/Anime"
                },
                {
                    "id": 14,
                    "name": "其他/Others"
                },
                {
                    "id": 1651,
                    "name": "爱情/love"
                },
                {
                    "id": 1652,
                    "name": "下山/descend mountains"
                },
                {
                    "id": 1653,
                    "name": "护妹狂魔/sister-protector"
                },
                {
                    "id": 1701,
                    "name": "逆袭/Comeback"
                },
                {
                    "id": 1702,
                    "name": "重生/reborn"
                },
                {
                    "id": 1703,
                    "name": "时尚/fashion"
                },
                {
                    "id": 1704,
                    "name": "复仇/Revenge"
                },
                {
                    "id": 1705,
                    "name": "情感/emotion"
                },
                {
                    "id": 1706,
                    "name": "霸总/Domineering President"
                },
                {
                    "id": 1707,
                    "name": "现代/modern"
                },
                {
                    "id": 1708,
                    "name": "超能力/Super Power"
                },
                {
                    "id": 1709,
                    "name": "战神/God Of War"
                },
                {
                    "id": 1710,
                    "name": "女言/Famale Romance"
                },
                {
                    "id": 1711,
                    "name": "励志/Self Improvement"
                },
                {
                    "id": 1751,
                    "name": "萌宝/Cute Baby"
                },
                {
                    "id": 1752,
                    "name": "打脸/humiliate"
                },
                {
                    "id": 1851,
                    "name": "团宠/group favorite"
                },
                {
                    "id": 1852,
                    "name": "家庭伦理/Family Ethics"
                },
                {
                    "id": 1901,
                    "name": "甜宠/Sweet Love"
                },
                {
                    "id": 1902,
                    "name": "系统/system"
                },
                {
                    "id": 1903,
                    "name": "民俗/folklore"
                },
                {
                    "id": 1951,
                    "name": "虐恋/Sadistic Love"
                },
                {
                    "id": 1952,
                    "name": "年代/era"
                },
                {
                    "id": 1953,
                    "name": "亲情/family"
                },
                {
                    "id": 1954,
                    "name": "体育/sports"
                },
                {
                    "id": 1955,
                    "name": "古装/ancient costume"
                },
                {
                    "id": 1956,
                    "name": "农村苦情/Grievance"
                }
            ],
            spec: null,
            comp: null,
            pageNo: 1,
            pageSize: 20,
            total: 100,
            continues: 4,
            nickname: '',
            byid: '',
            link: '',
            form: {},
            isLoggedIn: false,
            dialogVisible1: false,
            dialogVisible: false,
            dialogWidth: '540px', // 默认宽度为30%
            dialogWidth1: '700px', // 默认宽度为30%
            input: '',
            throttleTimeout: null,
            selectedEpisode: 1,      // 选中的集（初始为第1集）
            list: [
                {
                    "category": [
                        {
                            "id": 1,
                            "name": "男频/Male Category"
                        },
                        {
                            "id": 3,
                            "name": "都市/Urban"
                        }, {
                            "id": 2,
                            "name": "男2频/Male Category"
                        },
                        {
                            "id": 51,
                            "name": "都1市/Urban"
                        }, {
                            "id": 11,
                            "name": "男3频/Male Category"
                        },
                        {
                            "id": 311,
                            "name": "1都市/Urban"
                        }, {
                            "id": 122,
                            "name": "5男频/Male Category"
                        },
                        {
                            "id": 333,
                            "name": "6都市/Urban"
                        },
                    ],
                    "cover_image": "https://chatai-pro.wecall.info/files/1723895214270-3e67076a828f04fc738fa789b989aed9.webp",
                    "desc": "32歲的宋岩與妻子林美月一直相敬如賓，相親相愛，但卻因為公司組織的一場體檢，讓宋岩查出了自己得了不育症，由此引發了宋岩對林美月的懷疑，而對此毫無了解的林美月還在為弟弟結婚的彩禮錢跟宋岩吵鬧，這也徹底激怒了孩子，是美月還對美的孩子，是對美月深澇。林美月對此感到無比委屈，與宋岩發生爭吵。",
                    "file_id": 4060,
                    "is_test": 1,
                    "lang": "zh_hant",
                    "progress_state": 1,
                    "shortplay_id": 102084,
                    "title": "妻子不能說的秘密",
                    "total": 75,
                    "voice_lang": "zh_hans"
                },
                {
                    "category": [
                        {
                            "id": 1,
                            "name": "男频/Male Category"
                        },
                        {
                            "id": 3,
                            "name": "都市/Urban"
                        }
                    ],
                    "cover_image": "https://chatai-pro.wecall.info/files/1723895214270-3e67076a828f04fc738fa789b989aed9.webp",
                    "desc": "32歲的宋岩與妻子林美月一直相敬如賓，相親相愛，但卻因為公司組織的一場體檢，讓宋岩查出了自己得了不育症，由此引發了宋岩對林美月的懷疑，而對此毫無了解的林美月還在為弟弟結婚的彩禮錢跟宋岩吵鬧，這也徹底激怒了孩子，是美月還對美的孩子，是對美月深澇。林美月對此感到無比委屈，與宋岩發生爭吵。",
                    "file_id": 4060,
                    "is_test": 1,
                    "lang": "zh_hant",
                    "progress_state": 1,
                    "shortplay_id": 102084,
                    "title": "妻子不能說的秘密",
                    "total": 75,
                    "voice_lang": "zh_hans"
                },
                {
                    "category": [
                        {
                            "id": 1,
                            "name": "男频/Male Category"
                        },
                        {
                            "id": 3,
                            "name": "都市/Urban"
                        }
                    ],
                    "cover_image": "https://chatai-pro.wecall.info/files/1723895214270-3e67076a828f04fc738fa789b989aed9.webp",
                    "desc": "32歲的宋岩與妻子林美月一直相敬如賓，相親相愛，但卻因為公司組織的一場體檢，讓宋岩查出了自己得了不育症，由此引發了宋岩對林美月的懷疑，而對此毫無了解的林美月還在為弟弟結婚的彩禮錢跟宋岩吵鬧，這也徹底激怒了孩子，是美月還對美的孩子，是對美月深澇。林美月對此感到無比委屈，與宋岩發生爭吵。",
                    "file_id": 4060,
                    "is_test": 1,
                    "lang": "zh_hant",
                    "progress_state": 1,
                    "shortplay_id": 102084,
                    "title": "妻子不能說的秘密",
                    "total": 75,
                    "voice_lang": "zh_hans"
                },
            ],
            selectedTypeIds: [],
            descExpanded: false, // 简介展开状态
            videos:{}
        }
    },
    computed: {
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        // 连续页码起始数字与结束数字
        startNumAndEndNum() {
            const {
                pageNo,
                continues,
                totalPage
            } = this;
            let start = 0;
            let end = 0;
            // 如果总页数少于连续页数
            if (totalPage < continues) {
                start = 1;
                end = totalPage;
            } else {
                start = pageNo - Math.floor(continues / 2);
                end = pageNo + Math.floor(continues / 2);
                // start出现0/负数
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                // end大于总页数
                if (end > totalPage) {
                    start = totalPage - continues + 1;
                    end = totalPage;
                }
            }
            return {
                start,
                end
            };
        },
        pagesArr() {
            let arr = [];
            // 连续页码个数
            arr.length =
                this.totalPage < this.continues ? this.totalPage : this.continues;
            // 第一个连续页码
            let pageNum = this.startNumAndEndNum.start;
            for (let i = 0; i < arr.length; i++) {
                arr[i] = pageNum;
                pageNum++;
            }
            return arr;
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateDialogWidth);
    },
    mounted() {
        this.fetchMediaList()
        this.updateDialogWidth();
        window.addEventListener('resize', this.updateDialogWidth);
        this.getCityList()
        this.getTypeList()
    },
    methods: {
        // 多选切换
        toggleType(item) {
            const id = Number(item.id);
            const idx = this.selectedTypeIds.indexOf(id);
            if (idx === -1) {
                this.selectedTypeIds.push(id);
            } else {
                this.selectedTypeIds.splice(idx, 1);
            }
            this.pageNo = 1;
            this.fetchMediaList();
        },
        async changeCity(item, k) {
            this.pageNo = 1
            this.cityId = item.id
            this.city = k
            this.fetchMediaList()
        },
        changeType(item, k) {
            this.pageNo = 1

            this.typeId = item.id
            this.type = item.id
            this.fetchMediaList()
        },
        changeSort(item, k) {
            this.pageNo = 1

            this.sort = k
            this.fetchMediaList()

        },
        changeCityAll(item, k) {
            this.pageNo = 1

            this.city = null
            this.cityId = null
            this.fetchMediaList()

        },
        // 全部（清空多选）
        changeTypeAll() {
            this.selectedTypeIds = [];
            this.pageNo = 1;
            this.fetchMediaList();
        },

        async getTypeList() {
            return
            try {
                const timestamp = Math.floor(Date.now() / 1000);
                let sign = await generateSign({ user_id: '417000105', role_id: '417000105', timestamp, token: '023f0354284c13b666c17888576e6bb9' });
                const { data: res } = await axios.post(
                    'https://open-api.bytedrama.com/bytedrama/open/api/sp/category/list',
                    {
                        auth_info: {
                            user_id: 417000105,
                            role_id: 417000105,
                            timestamp: String(timestamp),
                            sign: String(sign.sign),
                            token: '023f0354284c13b666c17888576e6bb9',
                        }
                    },
                    {
                        headers: {
                            'Accept': '*/*',
                            'Accept-Encoding': 'gzip, deflate, br',
                            'Connection': 'Keep-Alive',
                            'Content-Type': 'application/json',
                            'User-Agent': 'okhttp/4.12.0',
                            'token': '023f0354284c13b666c17888576e6bb9',
                        }
                    }
                );
                this.typeList = res.data
            } catch (e) {
                console.error(e);
            }
        },
        async getCityList() {
            const {
                data: res
            } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaCity')
            this.cityList = res.data
        },
        clickNickname() {
            this.nickname = this.form.nickname
            this.byid = this.form.uid
            this.pageNo = 1
            this.fetchMediaList();
            setTimeout(() => {
                this.scrollToTop();
            }, 200)
            this.dialogVisible1 = false
        },

        showDialogVisible() {
            this.dialogVisible = true
        },
        goApp() {
            var url = new URL(this.link);
            var params = new URLSearchParams(url.search);
            var deepLinkUrl = "iptvdeeplink://?" + params.toString();

            // 创建一个a标签并尝试通过点击跳转到应用
            var a = document.createElement('a');
            a.href = deepLinkUrl;
            a.style.display = 'none';
            document.body.appendChild(a);

            // 尝试点击a标签来打开应用
            a.click();

            // 设置一个计时器，在2秒后重定向到应用商店（假定跳转失败的情况）
            setTimeout(function () {
                window.location = "https://www.pgyer.com/7mCZCK7A";
            }, 2000);
        },
        copy() {
            this.$copyText(this.link).then(
                (e) => {
                    this.$message({
                        message: 'success',
                        type: 'success',
                        customClass: 'my-custom-message'
                    })
                    console.log(e);
                },
                (err) => {
                    console.log(err);
                }
            );

        },
        async showMedia(item) {
            this.form = Object.assign({}, item);
            this.dialogVisible1 = true;
        },
        updateDialogWidth() {
            this.dialogWidth = window.innerWidth < 600 ? '86%' : '800px';
            this.dialogWidth1 = window.innerWidth < 600 ? '86%' : '800px';
        },
        getPageNo(newPageNo) {
            this.pageNo = newPageNo;
            this.fetchMediaList();
            setTimeout(() => {
                this.scrollToTop();
            }, 200)
        },
        scrollToTop() {
            const scrollDuration = 500; // 动画持续时间，单位为毫秒
            const start = window.pageYOffset;
            const startTime = performance.now();

            const scroll = (timestamp) => {
                const currentTime = timestamp - startTime;
                const progress = Math.min(currentTime / scrollDuration, 1);
                const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

                window.scrollTo(0, start * (1 - easeInOutCubic(progress)));

                if (progress < 1) {
                    window.requestAnimationFrame(scroll);
                }
            };

            window.requestAnimationFrame(scroll);
        },
        search() {
            this.fetchMediaList();
        },
        async fetchMediaList() {
            return
            const timestamp = Math.floor(Date.now() / 1000).toString();
            let sign = await generateSign({ user_id: '417000105', role_id: '417000105', timestamp, token: '023f0354284c13b666c17888576e6bb9' });


            // 你的分页参数，这里举例也可以自行传递
            const page = this.pageNo || 1;
            const page_size = this.pageSize || 20;

            // 组装请求的body
            let postData = {
                auth_info: {
                    user_id: 417000105,
                    role_id: 417000105,
                    timestamp: String(timestamp),
                    sign: String(sign.sign),
                    token: '023f0354284c13b666c17888576e6bb9',
                },
                page_info: {
                    page: page,           // 当前页
                    page_size: page_size  // 每页条数
                },
                controller: {
                    lang: ["zh_hans"],
                    category_ids: this.selectedTypeIds
                }
            };

            // =============== 发POST请求 ===============
            try {
                const { data: res } = await axios.post(
                    'https://open-api.bytedrama.com/bytedrama/open/api/sp/file/list',
                    postData,
                    {
                        headers: {
                            'Accept': '*/*',
                            'Accept-Encoding': 'gzip, deflate, br',
                            'Connection': 'Keep-Alive',
                            'Content-Type': 'application/json',
                            'User-Agent': 'okhttp/4.12.0',
                            'token': '023f0354284c13b666c17888576e6bb9' // 如需，按你前文要求附加此字段
                        }
                    }
                );
                this.list = res.data || [];
                this.total = res.total || 0;
            } catch (e) {
                console.error(e);
            }
        },


        go() {
            this.$router.push('/porter');
        },
        handleClose(done) {
            done();
            this.clearForms();

        },
        toggleLoginMethod() {
            this.clearForms();
            this.loginMethod = this.loginMethod === 'password' ? 'verificationCode' : 'password';
        },
        switchForm(form) {
            this.clearForms();
            this.currentForm = form;
        },




        closeTag() {
            this.nickname = ''
            this.byid = ''
            this.fetchMediaList();

        },
        async showMedia(item) {
            this.form = Object.assign({}, item);
            this.descExpanded = false; // 重置展开状态
            this.dialogVisible1 = true;
        },

        // 选中某一集
        selectEpisode(index) {
            this.selectedEpisode = index;
        },
        async goPlay() {
            try {
                // 控台打印用于调试，可保留
                console.log(this.selectedEpisode);
                console.log(this.form);
                console.log('播放第 ' + this.selectedEpisode + ' 集');

                const timestamp = Math.floor(Date.now() / 1000);
                // 生成签名
                let signRes = await generateSign({
                    user_id: '417000105',
                    role_id: '417000105',
                    timestamp,
                    token: '023f0354284c13b666c17888576e6bb9'
                });

                // API参数
                const params = {
                    auth_info: {
                        user_id: 417000105,
                        role_id: 417000105,
                        timestamp: String(timestamp),
                        sign: String(signRes.sign),
                        token: '023f0354284c13b666c17888576e6bb9',
                    },
                    controller: {
                        download_config: [
                            {
                                file_id: this.form.file_id,                      // 剧集file_id
                                target_index: [Number(this.selectedEpisode)]      // 选中集，必须是数组
                            }
                        ]
                    }
                };

                const { data: res } = await axios.post(
                    'https://open-api.bytedrama.com/bytedrama/open/api/sp/file/download',
                    params,
                    {
                        headers: {
                            'Accept': '*/*',
                            'Accept-Encoding': 'gzip, deflate, br',
                            'Connection': 'Keep-Alive',
                            'Content-Type': 'application/json',
                            'User-Agent': 'okhttp/4.12.0',
                            'token': '023f0354284c13b666c17888576e6bb9',
                        }
                    }
                );
                // 处理接口返回（比如跳转播放页、弹窗提示等）
                console.log('接口返回', res);
                this.videos = res.data[0][0]
                this.currentPlayUrl = this.videos.play_url;
                this.showVideoDialog = true;
                // 这里可以处理如下载/跳转播放等
                // 如 window.open(res.data.url) （依据接口返回）

                 

            } catch (e) {
                console.error('操作失败: ', e);
            }
        },
        goDownload() {
            // 同理，可传 this.selectedEpisode
            console.log('下载第 ' + this.selectedEpisode + ' 集');
            // 具体下载逻辑...
        },
    }
}
</script>
<style scoped lang="scss">
.contarner-page {
    padding: 30px;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    min-height: 93vh;
}
/* 现代简约视频弹窗样式 */
.modern-video-dialog {
    background: linear-gradient(135deg, #232d4d 0%, #191f36 100%);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(30, 36, 66, 0.45);
    overflow: hidden;
    padding: 0 !important;
}

.modern-video-dialog .el-dialog__header {
    border-bottom: none;
    background: transparent;
}

.modern-video-dialog .el-dialog__title {
    color: #fff;
    font-size: 18px;
}

.modern-video-dialog .el-dialog__body {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.modern-video-dialog video {
    background: #11172b;
    outline: none;
    border-radius: 0 0 14px 14px;
    max-width: 100%;
    max-height: 70vh;
    box-shadow: 0 0 0 1px #232d4d, 0 4px 16px rgba(46, 57, 133, .15);
    margin: 0 auto;
    display: block;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #b8c2e8;
    font-size: 20px;
    transition: color .2s;
}

.modern-video-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

/* 响应式兼容小屏 */
@media (max-width: 768px) {
    .modern-video-dialog {
        width: 98vw !important;
        max-width: 98vw;
    }

    .modern-video-dialog video {
        max-width: 98vw;
        max-height: 40vh;
    }
}
/* 弹框整体样式 */
::v-deep .modern-media-dialog {
    background: linear-gradient(145deg, #1e2442 0%, #151b2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;

    .el-dialog__header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .dialog-title {
            color: #ffffff;
            font-size: 20px;
            font-weight: 600;
        }

        .el-dialog__headerbtn {
            top: 20px;
            right: 20px;

            .el-dialog__close {
                color: #b8c2e8;
                font-size: 20px;

                &:hover {
                    color: #ffffff;
                }
            }
        }
    }

    .el-dialog__body {
        padding: 0;
        max-height: 70vh;
        overflow-y: auto;

        /* 自定义滚动条 */
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(64, 125, 255, 0.5);
            border-radius: 3px;

            &:hover {
                background: rgba(64, 125, 255, 0.7);
            }
        }
    }
}
.modern-media-dialog .episode-selector {
    padding: 0 20px
}

.modern-media-dialog .episode-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
}

.modern-media-dialog .episode-chip {
    background: rgba(100, 120, 255, 0.13);
    color: #b8c2e8;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all .2s;
    user-select: none;
}

.modern-media-dialog .episode-chip.selected {
    background: #407dff;
    color: #fff;
    border-color: #407dff;
}

.modern-media-dialog .episode-chip:hover {
    color: #fff;
    border-color: #407dff;
}
.dialog-content {
    display: flex;
    gap: 30px;
    padding: 30px;
}

/* 海报区域 */
.poster-section {
    flex-shrink: 0;

    .poster-container {
        position: relative;
        width: 200px;

        .poster-image {
            width: 100%;
            height: 280px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .poster-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(64, 125, 255, 0.4);
        }
    }
}

/* 信息区域 */
.info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    /* 防止flex子项溢出 */

    .media-title {
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        margin: 0;
        word-wrap: break-word;
        hyphens: auto;
    }

    .category-section {
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .category-chip {
                display: inline-block;
                background: rgba(64, 125, 255, 0.15);
                color: #407DFF;
                padding: 6px 14px;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 500;
                border: 1px solid rgba(64, 125, 255, 0.3);
                backdrop-filter: blur(10px);
                white-space: nowrap;
            }
        }
    }

    .description-section {
        .section-title {
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 12px 0;
        }

        .description-content {
            position: relative;

            .description-text {
                color: #b8c2e8;
                font-size: 14px;
                line-height: 1.6;
                margin: 0;
                word-wrap: break-word;
                hyphens: auto;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                transition: all 0.3s ease;
            }

            &:not(.expanded) .description-text {
                -webkit-line-clamp: 4;
            }

            &.expanded .description-text {
                -webkit-line-clamp: unset;
            }

            .expand-btn {
                color: #407DFF;
                font-size: 13px;
                cursor: pointer;
                margin-top: 8px;
                display: flex;
                align-items: center;
                gap: 4px;
                transition: color 0.3s ease;

                &:hover {
                    color: #01C2FF;
                }

                i {
                    font-size: 12px;
                }
            }
        }
    }

    .meta-info {
        display: flex;
        gap: 20px;

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .meta-label {
                color: #8892b0;
                font-size: 14px;
                font-weight: 500;
            }

            .meta-value {
                color: #b8c2e8;
                font-size: 14px;
                padding: 4px 10px;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 8px;
            }
        }
    }
}

/* 操作按钮区域 */
.action-section {
    padding: 0 30px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    padding-top: 24px;

    .action-buttons {
        display: flex;
        gap: 16px;

        button {
            flex: 1;
            height: 48px;
            border: none;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            i {
                font-size: 18px;
            }

            &:hover {
                transform: translateY(-2px);
            }

            &:active {
                transform: translateY(0);
            }
        }

        .play-button {
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
            color: white;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);

            &:hover {
                box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
            }

            .play-icon {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 0 8px 12px;
                border-color: transparent transparent transparent currentColor;
            }
        }

        .download-button {
            background: linear-gradient(135deg, #4ECB71 0%, #44A08D 100%);
            color: white;
            box-shadow: 0 8px 25px rgba(78, 203, 113, 0.3);

            &:hover {
                box-shadow: 0 12px 30px rgba(78, 203, 113, 0.4);
            }

            .download-icon {
                width: 16px;
                height: 16px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 0;
                    width: 2px;
                    height: 10px;
                    background: currentColor;
                    transform: translateX(-50%);
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 2px;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 4px 4px 0 4px;
                    border-color: currentColor transparent transparent transparent;
                    transform: translateX(-50%);
                }
            }
        }
    }
}
::v-deep .el-tag {
    margin-left: 8px;
    border: 0;
    background-color: #344264;
    font-size: 16px;
    line-height: 33px;
}

.search_box {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);

    .item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;

        .tag_title {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            width: 88px;
            text-align: right;
            padding: 8px 8px 8px 0;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .tag_all,
        .tag {
            height: 36px;
            border-radius: 18px;
            line-height: 36px;
            padding: 0 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #b8c2e8;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                background: rgba(64, 125, 255, 0.2);
                border-color: #407DFF;
                color: #fff;
            }
        }

        .change {
            color: #fff;
            background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
            border: none;
            box-shadow: 0 4px 15px rgba(64, 125, 255, 0.3);
        }
    }
}


::v-deep .my-custom-message {
    background-color: red !important;
    /* 自定义背景色 */
    color: white;
    /* 如果需要也可以更换文字颜色 */
}

::v-deep .el-dialog__title {
    color: #eee;
    font-size: 20px;
}

::v-deep .el-input__inner {
    background-color: transparent;
    border-color: #4089F7;
    color: #eee;
}



::v-deep .el-form-item__label {
    color: #eee;
    font-size: 16px;
}

 

::v-deep .button-porter1 {
    background: #344264;
    border: 0;
}

::v-deep.button-porter-play {
    border: 0;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-porter {
    width: 100%;
    background: linear-gradient(270deg, #074CFF 0%, #01C2FF 100%);
}

::v-deep .button-text {
    font-size: 14px;
}



.el-tag {
    margin-top: 20px;
    font-size: 16px;
}

.dialog-footer {
    text-align: right;
}

.page_content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .home_content {

        width: 100%;

        .logo {
            margin-right: 30px;
        }

        .login {
            margin-left: 30px;
        }
    }
}

.page_top {
    display: flex;
    align-content: center;
    justify-content: space-between;
}

.success-box {
    padding: 30px 0;

    .success-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        padding: 0;
    }
}

.media-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);

    &:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(64, 125, 255, 0.5);
        border-color: rgba(64, 125, 255, 0.3);

        .poster-img {
            transform: scale(1.1);
        }

        .poster-overlay {
            opacity: 1;
        }

        .play-icon {
            transform: scale(1) rotate(0deg);
        }

        .media-title {
            color: #407DFF;
        }
    }

    .card-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .media-poster {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: linear-gradient(135deg, #1a1f3a 0%, #0f1429 100%);

        .poster-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .poster-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                    rgba(64, 125, 255, 0.8) 0%,
                    rgba(1, 194, 255, 0.6) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .play-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.8) rotate(-10deg);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

            .icon-play {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 8px 0 8px 14px;
                border-color: transparent transparent transparent #407DFF;
                margin-left: 2px;
            }
        }
    }

    .media-info {
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .media-title {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
        }

        .media-meta {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: auto;

            .episode-count {
                display: inline-flex;
                align-items: center;
                padding: 4px 12px;
                background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                color: white;
                font-size: 12px;
                font-weight: 600;
                border-radius: 12px;
                align-self: flex-start;
                box-shadow: 0 2px 8px rgba(64, 125, 255, 0.3);
            }

            .category-tags {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;

                .category-tag {
                    padding: 3px 8px;
                    background: rgba(255, 255, 255, 0.15);
                    color: #b8c2e8;
                    font-size: 11px;
                    font-weight: 500;
                    border-radius: 8px;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(5px);
                }
            }
        }
    }
}



.dialog-box {
    .media_img {
        .img {
            object-fit: cover;
            width: 200px;
            height: 280px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
    }

    .info {
        margin-left: 30px;
        height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row {
            flex: 1;

            .col {
                margin-bottom: 16px;

                &.title-col {
                    font-size: 22px;
                    font-weight: 700;
                    color: #fff;
                    line-height: 1.3;
                }

                &.desc-col {
                    font-size: 14px;
                    color: #b8c2e8;
                    line-height: 1.5;
                    display: -webkit-box;
                    -webkit-line-clamp: 4;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                &.category-col {
                    .label {
                        color: #b8c2e8;
                        font-size: 14px;
                    }

                    .category-tag {
                        display: inline-block;
                        background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                        color: white;
                        padding: 4px 12px;
                        border-radius: 12px;
                        font-size: 12px;
                        margin-right: 8px;
                        margin-bottom: 4px;
                    }
                }

                &:not(.title-col):not(.desc-col):not(.category-col) {
                    font-size: 16px;
                    color: #eee;
                }
            }
        }

        .btns {
            gap: 15px;
            margin-top: 20px;

            .button-play,
            .button-download {
                flex: 1;
                height: 44px;
                border-radius: 22px;
                font-size: 14px;
                font-weight: 600;
                border: none;
                transition: all 0.3s ease;

                i {
                    margin-right: 6px;
                }
            }

            .button-play {
                background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
                box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
                }
            }

            .button-download {
                background: linear-gradient(135deg, #4ECB71 0%, #44A08D 100%);
                box-shadow: 0 4px 15px rgba(78, 203, 113, 0.3);

                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(78, 203, 113, 0.4);
                }
            }
        }
    }
}

.mobile-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    .mobile-button {
        flex: 1;
        height: 44px;
        border-radius: 22px;
        font-size: 14px;
        font-weight: 600;
        border: none;

        i {
            margin-right: 6px;
        }
    }
}

.modern-pagination {
    display: flex;
    justify-content: center;
    margin: 40px 0;

    .pagination-container {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.05);
        padding: 12px 20px;
        border-radius: 50px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);

        .pagination-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover:not(.disabled) {
                background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                border-color: transparent;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(64, 125, 255, 0.3);
            }

            &.disabled {
                opacity: 0.4;
                cursor: not-allowed;

                &:hover {
                    transform: none;
                    box-shadow: none;
                }
            }

            .arrow-left,
            .arrow-right {
                width: 0;
                height: 0;
                border-style: solid;
            }

            .arrow-left {
                border-width: 4px 6px 4px 0;
                border-color: transparent currentColor transparent transparent;
            }

            .arrow-right {
                border-width: 4px 0 4px 6px;
                border-color: transparent transparent transparent currentColor;
            }

            .btn-text {
                font-size: 13px;
            }
        }

        .page-numbers {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 12px;

            .page-btn {
                min-width: 36px;
                height: 36px;
                border-radius: 18px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                background: rgba(255, 255, 255, 0.1);
                color: #b8c2e8;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;

                &:hover:not(.active) {
                    background: rgba(64, 125, 255, 0.2);
                    border-color: #407DFF;
                    color: #fff;
                    transform: translateY(-1px);
                }

                &.active {
                    background: linear-gradient(135deg, #407DFF 0%, #01C2FF 100%);
                    border-color: transparent;
                    color: #fff;
                    font-weight: 600;
                    box-shadow: 0 4px 15px rgba(64, 125, 255, 0.4);
                }
            }

            .dots {
                color: #b8c2e8;
                font-size: 14px;
                padding: 0 8px;
                user-select: none;
            }
        }

        .page-info {
            margin-left: 16px;
            padding-left: 16px;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            color: #b8c2e8;
            font-size: 13px;
            white-space: nowrap;
        }
    }
}



/* 平板适配 */
@media (max-width: 1024px) {
    .success-box .success-list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    .media-card .media-info {
        padding: 14px;

        .media-title {
            font-size: 15px;
        }
    }
}

// 宽度小于1023px


.APPSHOW {
    display: none;
}


// 宽度小于768px
@media (max-width: 768px) {
    .PCSHOW {
        display: none !important;
    }
         .dialog-content {
             flex-direction: column;
             gap: 20px;
             padding: 20px;
         }
    
         .poster-section {
             align-self: center;
    
             .poster-container {
                 width: 160px;
    
                 .poster-image {
                     height: 220px;
                 }
             }
         }
    
         .info-section {
             .media-title {
                 font-size: 20px;
             }
    
             .meta-info {
                 flex-direction: column;
                 gap: 12px;
             }
         }
    
         .action-section {
             padding: 0 20px 20px;
    
             .action-buttons {
                 button {
                     height: 44px;
                     font-size: 15px;
                 }
             }
         }
    
         ::v-deep .modern-media-dialog {
             .el-dialog__header {
                 padding: 20px;
    
                 .dialog-title {
                     font-size: 18px;
                 }
             }
         }
 
     

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-dialog__header {
        padding: 20px;
    }

    ::v-deep .el-tag {
        margin-left: 8px;
        border: 0;
        background-color: #344264;
        font-size: 12px;
    }

    .loginbtns {
        .button-text {
            margin-left: 0px;
            display: block;
        }
    }

    .APPSHOW {
        display: block;
    }

    .container {
        padding: 0 14px;
    }

    .page_content {}

    .page_top {
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .bottom {
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .search_box {
        padding: 16px;

        .item {
            flex-direction: column;

            .tag_title {
                text-align: left;
                width: auto;
                margin-bottom: 12px;
                padding: 0;
            }

            .content {
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 8px;

                &::-webkit-scrollbar {
                    height: 4px;
                }

                &::-webkit-scrollbar-track {
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 2px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #407DFF;
                    border-radius: 2px;
                }
            }

            .tag_all,
            .tag {
                flex-shrink: 0;
                margin-bottom: 0;
            }
        }
    }

    .success-box {
        padding: 20px 0;

        .success-list {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 14px;
            padding: 0 16px;
        }
    }

    .media-card {
        border-radius: 10px;

        &:hover {
            transform: translateY(-3px) scale(1.01);
        }

        .media-poster .play-icon {
            width: 40px;
            height: 40px;

            .icon-play {
                border-width: 6px 0 6px 10px;
            }
        }

        .media-info {
            padding: 12px;
            gap: 10px;

            .media-title {
                font-size: 14px;
                -webkit-line-clamp: 2;
            }

            .media-meta {
                .episode-count {
                    padding: 3px 10px;
                    font-size: 11px;
                }

                .category-tags .category-tag {
                    padding: 2px 6px;
                    font-size: 10px;
                }
            }
        }
    }




    .dialog-box {
        flex-direction: column;

        .media_img .img {
            width: 140px;
            height: 200px;
            margin: 0 auto;
        }

        .info {
            margin-left: 0;
            margin-top: 20px;
            height: auto;

            .row .col {
                &.desc-col {
                    -webkit-line-clamp: 3;
                }
            }
        }
    }

    .app-button-porter {
        width: 100%;
        margin-top: 14px;
    }

    .app-porter-play {
        margin-top: 14px;
        width: 100%;
        margin-left: 0;
    }


}

.download-footer {
    margin-top: 30px;

    .btn-app {
        padding: 11px;
        background-color: #dd34ab;
        border-radius: 6px 6px 6px 6px;
        width: 100%;
    }

    .gohome {
        background-color: #1d212c;

        margin-top: 14px;
        padding: 11px;
        border-radius: 6px 6px 6px 6px;
        width: 100%;

        .refresh {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
            background-size: 16px 16px;
            background-repeat: no-repeat;
        }
    }

    .modern-pagination {
        margin: 30px 0 20px;

        .pagination-container {
            flex-wrap: wrap;
            justify-content: center;
            padding: 16px;
            border-radius: 16px;

            .pagination-btn {
                .btn-text {
                    display: none;
                }
            }

            .page-numbers {
                order: -1;
                margin: 0 0 12px 0;

                .page-btn {
                    min-width: 32px;
                    height: 32px;
                    border-radius: 16px;
                    font-size: 13px;
                }
            }

            .page-info {
                order: 1;
                margin: 12px 0 0 0;
                padding: 0;
                border: none;
                text-align: center;
                width: 100%;
                font-size: 12px;
            }
        }
    }

}
</style>